<template>
  <transition name="fade">
    <div class="proposal-container">
      <div class="proposal-box">
        <textarea v-model="text"></textarea>
        <div class="button" @click="publish">确认提交</div>
      </div>
      <div class="bg"  @click="back"></div>
    </div>
  </transition>
</template>

<script>
import { http } from 'api/main.js'

export default {
  data () {
    return {
      text: ''
    }
  },
  methods: {
    publish() {
      http('suggestion', {
        content: this.text
      }, 'post').then((res) => {
        alert('提交成功')
        this.$router.push({
          path: '/user'
        })
      })
    },
    back() {
      this.$router.push({
        path: '/user'
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"

.proposal-container
  position: fixed;
  top: 0
  left: 0
  right: 0
  bottom: 0
  z-index: 1000
  overflow: hidden;
  .proposal-box
    width: 90%;
    height: 250px
    position: absolute;
    top: 50%
    transform: translateY(-60%)
    margin: 0 5%
    background-color: #fff
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center
    border-radius: 5px
    textarea
      resize: none;
      width: 90%;
      height: 150px;
      margin-top: 10px
    .button
      padding: 10px 20px 10px 20px
      background-color: #009fab
      color: #fff
      border-radius: 3px
      margin-bottom: 10px
  .bg
    width: 100%
    height: 100%
    background-color: rgba(0, 0, 0, 0.5)




.fade-enter-active,
.fade-leave-active
  transition: opacity .5s;
.fade-enter,
.fade-leave-to
  opacity: 0;
</style>
